<template>
	<!-- 购物车页面 -->
	<view class="container">
		<!-- 购物车列表 -->
		<view class="carts">
			<uni-swipe-action-item v-for="(item, index) in list" :autoClose="false" :key="item.id">
				<view class="cart-item flex flex-vcenter">
					<!-- 选择框 -->
					<view class="select-icon" :data-index="index" @tap="handleSelectedChange">
						<radio :checked="item.is_selected" color="#6c43ff" />
					</view>
					<!-- 商品信息 -->
					<view class="item">
						<image :src="item.skuPic" mode="aspectFill" class="thumb" @tap="toProductPage(item)"></image>
						<view class="right">
							<view @tap="toProductPage(item)">
								<!-- <view class="category">{{ item.sku.products.subTitle }}</view> -->
								<view class="title">{{ item.productName }}</view>
								<view class="attr-c">
									{{ item.skuAttr | productAttrsToString }}
								</view>
								<view class="price-c">
									<view class="price">
										{{ item.skuPrice }}晶石
										<!-- <PriceDisplay :info="item.sku"></PriceDisplay> -->
									</view>
								</view>
							</view>
							<!-- 数量编辑 -->
							<view class="count-c">
								<view class="buy-count">
									<IInputNumber :value="item.quantity" :skuid="item.skuId" size="small" :iscart="true"
										@change="totalChange($event, index)"></IInputNumber>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 删除按钮 -->
				<template v-slot:right>
					<view class="right-c" @tap="deleteAction(index)"><text>删除</text></view>
				</template>
			</uni-swipe-action-item>
			<!-- 购物车为空时显示暂无数据 -->
			<view v-if="!list.length" style="height: 90vh;overflow: hidden;">
				<view style="height: 1rpx;"></view>
				<NoData></NoData>
			</view>
		</view>

		<!-- 购物车底部结算栏 -->
		<view class="footer-actions space-between flex-vcenter safe-area-bottom">
			<!-- 全选按钮 -->
			<view class="select-all flex flex-vcenter" @tap="handleSelectedAll">
				<radio :checked="selectedAll" color="#6c43ff" />
				<text>全选</text>
			</view>
			<!-- 结算按钮 -->
			<view class="side-right flex flex-vcenter">
				<view class="buy-button" @click="payByCart" v-if="list.length != 0">
					去结算
					<!-- <PriceDisplay :info="totalPrice"></PriceDisplay> -->
					￥{{totalPrice}}
				</view>
				<view class="buy-button-false" @click="payByCart" v-else>
					您还没选购商品
					<PriceDisplay :info="totalPrice"></PriceDisplay>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cartList,
		cartClear
	} from "../../api/cart"
	import {
		mapGetters
	} from "vuex"
	import mixin from "../../utils/mixin.js"
	import IButton from "../../components/Button/index.vue";
	import IInputNumber from "../../components/InputNumber/index.vue";

	export default {
		mixins: [mixin],
		components: {
			IButton,
			IInputNumber
		},
		data() {
			return {
				init: false,
				list: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#F27233'
					}
				}]
			}
		},
		computed: {
			...mapGetters(['token']),
			// 计算是否全选
			selectedAll() {
				let selectedAll = true,
					len = this.list.length
				for (let i = 0; i < len; i++) {
					if (!this.list[i].is_selected) {
						selectedAll = false
						break
					}
				}
				return selectedAll
			},
			// 计算总价
			totalPrice() {
				let totalPrice = 0;
				console.log(this.list);
				this.list.forEach(item => {
					if (item.is_selected) {
						 const quantity = item.quantity.num ? item.quantity.num :item.quantity;
						 totalPrice += parseFloat((item.skuPrice)) * parseFloat(quantity);
						// totalPrice.scorePrice += (item.discountScorePrice || item.scorePrice) * (item.quantity || item.quantity.num)
					}
				})
				return totalPrice
			}
		},
		onLoad() {
			this.$visitor.record('cart');
			// cartList().then(res => {
			// 	if (res.code == 200) {
			// 		this.list = res.data
			// 		console.log(res);
			// 	}
			// }).catch(err => {
			// 	console.log(err)
			// })

		},
		onShow() {
			if (this.token) {
				if (!this.init) {
					uni.showLoading({
						title: "加载中"
					})
				}
				// this.$api.emit('product.cart.index').then(res => {
				// 	uni.hideLoading()
				// 	this.init = true;
				// 	res.data.list.forEach(item => {
				// 		item.is_selected = item.is_selected ? item.is_selected : false
				// 		item.temp_total = item.total
				// 	})
				// 	this.list = res.data.list
				// })
				this.getList();
			}
		},
		methods: {
			async getList() {
				await this.$http("/zb-cart/list", 'get').then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						this.init = true;
						res.data.list.map(item => {
							item.is_selected = item.is_selected ? item.is_selected : false
							item.quantity = item.quantity
						})
						this.list = res.data.list
					}
				})
			},
			// 跳转到商品详情页
			toProductPage(item) {
				uni.navigateTo({
					url: '/pages/productDetail/index?uuid=' + item.uuid
				})
			},
			// 点击商品跳转到商品详情页
			gotoProductDetail(e) {
				let index = e.currentTarget.dataset.index
				uni.navigateTo({
					url: '/pages/productDetail/index?uuid=' + this.list[index].uuid
				})
			},
			// 结算
			payByCart() {
				let skus = []
				if (this.list.length == 0) {
					uni.showToast({
						title: '您还没选购商品',
						icon: 'none'
					})
					return false
				}
				this.list.forEach(item => {
					if (item.is_selected) {
						skus.push({
							skuId: item.skuId,
							total: item.quantity,
							issCart: true
						})
					}
				})
				if (skus.length) {
					uni.navigateTo({
						url: "/pages/orderPreview/index?skus=" + JSON.stringify(skus) + '&_source=cart'
					})
				}
				// let cartItems = [
				// 	{ "skuId": 243, "total": 10 },
				// 	{ "skuId": 246, "total": 3 }
				// ];
				// this.$http("/zb-order/settle", 'post', cartItems).then(res => {
				// 	if (res.code == 200) {
				// 		uni.navigateTo({
				// 			// url: "/pages/orderPreview/index?skus=" + JSON.stringify(skus) + '&_source=cart'
				// 		})
				// 	}
				// })
			},
			// 删除购物车商品
			async deleteAction(index) {
				let item = this.list[index]
				console.log(item);
				uni.showLoading({
					'title': '删除中'
				})
				await this.$http("/zb-cart/delete/" + item.skuId, 'DELETE').then(res => {
					this.list.splice(index, 1)
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						let that = this
						this.getList();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 购物车商品数量改变
			totalChange(e, index) {
				console.log(e);
				console.log(index);
				if (e.num === this.list[index].quantity) return
				this.list[index].quantity = e
			},
			// 选择框状态改变
			handleSelectedChange(e) {
				console.log(e);
				let index = e.currentTarget.dataset.index
				this.list[index].is_selected = !this.list[index].is_selected
				// 更新总价
				// this.updateTotalPrice()
			},
			// 全选/取消全选
			handleSelectedAll() {
				let flag = !this.selectedAll
				this.list.forEach(item => {
					item.is_selected = flag
				})
				// 更新总价
				// this.updateTotalPrice()
			},
		}
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #151515;
	}

	.container {
		background: white;
		/* #ifdef MP-ALIPAY */
		padding-top: 130rpx;
		/* #endif */
	}

	.carts {
		padding-bottom: 100rpx;

		padding: 0rpx 0rpx;
		background-color: #151515;

		padding-bottom: 100rpx;
	}

	.right-c {
		background: red;
		width: 100%;
		height: 100%;
		width: 160rpx;
		flex: 0 0 160rpx;
		text-align: center;
		display: flex;
		color: white;
		font-weight: 500;
		align-items: center;
		justify-content: center;
	}

	.cart-item {
		padding-left: 0;
		position: relative;
		border-bottom: 1rpx solid #F1F1F1;
		padding: 10rpx 30rpx;
		width: 100%;
		margin: 0rpx 0rpx;
		box-sizing: border-box;
		// border: 1px solid red;


		.select-icon {

			padding: 20rpx 10rpx 20rpx 0rpx;
		}

		// .thumb {
		// 	margin-left: 0rpx;
		// 	width: 200rpx;
		// 	height: 200rpx;
		// 	border-radius: 20rpx;
		// }

		.item {
			display: flex;
			width: 100%;
			padding: 36rpx 0rpx;
			// border-bottom: 1rpx solid #F1F1F1;
			position: relative;

			&.disableLine {
				border-bottom: 0rpx solid #F1F1F1;
			}

			.right {
				flex-grow: 1;
				// border: 1px solid red;
				position: relative;
			}

			.category {
				// background:rgba(241,241,241,1);
				color: #393939;
				font-size: 22rpx;
				display: inline-block;
				margin: 20rpx 0rpx 10rpx 0rpx;
				// padding: 4rpx 8rpx;
			}

			.thumb {
				width: 216rpx;
				height: 216rpx;
				margin-right: 30rpx;
				flex: 0 0 216rpx;
				border-radius: 20rpx;
			}

			.title {
				/* color: #393939; */
				color: #fff;
				font-size: 40rpx;
				font-weight: bold;
				// min-height: 60rpx;
			}

			.attr-c {
				/* color: gray; */
				font-size: 36rpx;
				color: #fff;
			}

			.price-c {
				display: flex;
				align-items: center;

				.price {
					color: #FF3535;
					font-weight: 500;
					margin-right: 20rpx;
					flex-grow: 1;
					font-size: 35rpx;
				}

				.origin-price {
					color: #B3B3B3;
					font-size: 24rpx;
					text-decoration: line-through;
				}

				.sale {
					color: #B3B3B3;
					font-size: 24rpx;
					margin-right: 20rpx;
				}
			}

			.count-c {
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.footer-actions {
		position: fixed;
		bottom: 2%;
		left: 0;
		width: 100%;
		// background-color: #fff;
		// box-shadow: 0 -2rpx 4rpx rgba(206, 206, 206, 0.3);
		z-index: 10;

		.select-all {
			height: 100rpx;
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			color: #393939;

			text {
				// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				background-color: #6c43ff;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-left: 10rpx;
				font-size: 35rpx;
			}
		}

		.buy-button {
			width: 552rpx;
			height: 78rpx;
			// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
			background-color: #6c43ff;
			color: #fff !important;
			font-weight: 100 !important;
			font-size: 35rpx;
			background-size: cover;
			border-radius: 39rpx;
			line-height: 78rpx;
			text-align: center;
			color: white;
		}

		.buy-button-false {
			width: 552rpx;
			height: 78rpx;
			// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
			background-color: #ddd;
			color: #fff !important;
			font-weight: 100 !important;
			font-size: 35rpx;
			background-size: cover;
			border-radius: 39rpx;
			line-height: 78rpx;
			text-align: center;
			color: white;
		}

		.side-right {
			margin-right: 20rpx;


			.total-price-wrapper {
				margin-right: 20rpx;

				text {
					padding-left: 10rpx;
					font-size: 32rpx;
				}
			}
		}
	}
</style>